<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的音乐</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body style="width: 80%;margin: auto">
    <div id="nav"></div>
    <body>
        <div class="row mt-5 w-75 m-auto" id="body" style="height: 100vh">
            <div v-if="loginStatus===false" class="m-auto">
                <a href="/music_platform/pages/login.html"><el-empty description="请登录"></el-empty></a>
            </div>
            <div v-else class="col-md-12" style="margin-top: 20px">
                <div class="row m-auto">
                    <template>
                        <el-tabs v-model="activeName" style="width: 700px;height: 700px">
                            <el-tab-pane label="歌曲动态" name="first">
                                <div style="height: 600px;overflow: auto;width: 700px">
                                    <div v-for="song in songList" class="mt-3" style="box-shadow:10px 5px 5px #fafafa;background-color:#e8e8e8;">
                                        <div>
                                            <a :href="'/music_platform/pages/singer_detail.html?sid='+song.singer.sid" style="text-decoration: none">{{song.singer.sname}}</a>
                                            <span class="ml-5">{{song.publishTimeStr}}上线新歌</span>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-2">
                                                <img :src="'/music_platform'+song.pic" class="mr-3 img-thumbnail" alt="..." style="width: 50px;height: 50px">
                                            </div>
                                            <div class="media-body col-md-5">
                                                <a :href="'/music_platform/pages/song_detail.html?mid='+song.mid" style="text-decoration: none;color: #0f0f0f">
                                                    <h6 class="mt-4">{{song.mname}}</h6>
                                                </a>
                                                <div>
                                                    <span v-for="cate in song.categorys" class="text-secondary"> {{cate.cname}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="专辑动态" name="second">
                                <div style="height: 600px;overflow: auto;width: 700px">
                                    <div v-for="album in albumList" class="mt-5">
                                        <div>
                                            <a :href="'/music_platform/pages/singer_detail.html?sid='+album.singer.sid" style="text-decoration: none">{{album.singer.sname}}</a>
                                            <span class="ml-5">{{album.publishTimeStr}}上线新专辑</span>
                                        </div>
                                        <div class="row" style="background-color: #cfd7dc;">
                                            <div class="col-md-2">
                                                <img :src="'/music_platform'+album.pic" class="mr-3 img-thumbnail" alt="..." style="width: 50px;height: 50px">
                                            </div>
                                            <div class="media-body col-md-5">
                                                <a :href="'/music_platform/pages/album_detail.html?alid='+album.alid" style="text-decoration: none;color: #0f0f0f">
                                                    <h6 class="mt-4">{{album.aname}}</h6>
                                                </a>
                                                <div>
                                                    <span class="ml-2 text-info" v-for="cate in album.categorys">{{cate.cname}}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <ul class="list-group">
                                            <li v-for="song in album.songs.slice(0,3)" class="list-group-item">
                                                <a :href="'/music_platform/pages/song_detail.html?mid='+song.mid" style="text-decoration: none;color: #0f0f0f">
                                                    <span><img :src="'/music_platform'+song.pic" class="mr-3 img-thumbnail" alt="..." style="width: 50px;height: 50px"></span>
                                                    <span>{{song.mname}}</span>
                                                </a>
                                            </li>
                                        </ul>
                                        <div v-if="album.songs.length>3">
                                            <el-collapse>
                                                <el-collapse-item title="展开更多">
                                                    <li v-for="song in album.songs.slice(3)" class="list-group-item">
                                                        <a :href="'/music_platform/pages/song_detail.html?mid='+song.mid" style="text-decoration: none;color: #0f0f0f">
                                                            <span><img :src="'/music_platform'+song.pic" class="mr-3 img-thumbnail" alt="..." style="width: 50px;height: 50px"></span>
                                                            <span>{{song.mname}}</span>
                                                        </a>
                                                    </li>
                                                </el-collapse-item>
                                            </el-collapse>
                                        </div>
                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                </div>
            </div>
        </div>
    </body>



    <!-- footer部分开始 -->
    <div id="footer"></div>
    <!-- footer部分结束 -->

    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/foot.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="js/newnav.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/getParameter.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        let app = new Vue({
            el:"#body",
            data:{
                activeName: 'first',
                albumList:[],
                songList:[],
                loginStatus:false,
            },
            methods: {
                loadSingeSongNews:function (){
                    let _this = this;
                    axios.get("/music_platform/singleSong/findUserFollowSingerSongs").then(
                        function (response){
                            _this.songList = response.data.data;
                            _this.loginStatus = response.data.flag;
                        }
                    )
                },
                loadAlbumNews:function (){
                    let _this = this;
                    axios.get("/music_platform/album/findUserFollowSingerAlbum").then(
                        function (response){
                            _this.albumList = response.data.data;
                        }
                    )
                }
            },
            created:function (){
                this.loadAlbumNews();
                this.loadSingeSongNews();
            }
        })
    </script>
</body>
</html>